<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<!-- <script src="../js/bootstrap/css/bootstrap-theme.min.css"></script> -->
<link rel="stylesheet" type="text/css" href="../mycss/style.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../laypage/laypage.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
<link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
<title>Insert title here</title>
</head>
<body id="tablePage">
<div  id="forTableCreate">
<blockquote>
常见问题管理
		</blockquote>
		<hr/>	 	
		<form class="form-horizontal row" id="select_all_form">
<label class="control-label col-xs-2"  style="width:14%" for="formGroupInputsmall">问题名称</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="serviceQuestionTitle" value=''>
  </div>
 <label class="col-xs-1 control-label"  for="formGroupInputsmall">类型</label>
  <div class="col-xs-2">
  <select class="form-control" name="serviceQuestionType" id="type_ifo_select">
    				<option value=''>不限</option>
			      <option>咨询服务</option>
			      <option>投诉服务</option>
			      <option>售前服务</option>
			      <option>售后服务</option>
				  </select> 
  </div>
 <button type="button" class="btn btn-primary col-xs-1" id="select_if_btn">查询</button> 
 <button type="button" class="btn btn-primary col-xs-1" data-toggle="modal" data-target="#myModal">添加</button>
</form>
<!-- 凡事要弹出表单框的一定是单个分配的，不适用于批量操作哦 -->   
<hr/>
	<div class="tableDiv">
		<table id="conTable" class="table table-bordered" >
			<tr class="info"><td></td><td></td><td>问题名称</td><td>类型</td><td>最后操作时间</td><td>创建人</td><td>操作</td></tr>
			<tr class="active" v-for="item in home"><td></td><td><input type="radio" name="radio" /></td><td>{{item.serviceQuestionTitle}}</td><td>{{item.serviceQuestionType}}</td><td>{{item.lastOperateTime}}</td><td>{{item.creator}}</td>
			<td><input class="btn btn-primary btn-xs active edit_btn" :update_id="item.serviceQuestionId" type="button" value="修改" data-toggle="modal" data-target="#updateModal">&nbsp;&nbsp;
			     <input class="btn btn-danger btn-xs active del_btn" type="button"  :delete_id="item.serviceQuestionId" value="删除" data-toggle="modal" data-target="#deleteModal">&nbsp;&nbsp;
			     <input class="btn btn-info btn-xs active get_btn" type="button"  :get_id="item.serviceQuestionId" value="查看" data-toggle="modal" data-target="#getModal">&nbsp;&nbsp;</tr>
			     <tr >
			      <td id="clear" colspan="9"></td>
			      </tr>
		</table>	
	</div>
	<!-- 添加的模态框-->  
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">新增</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	          
	      	  <!-- 姓名框 -->
			  <div class="form-group">
			    <label for="inputEmail3" class="col-sm-2 control-label">问题名称</label>
			    <div class="col-sm-6">
			      <input type="text" name="serviceQuestionTitle"  class="form-control" id="serviceName_add_input" placeholder="Service name is here .">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">问题类型</label>
			    <div class="col-sm-5">
			      <select class="form-control" name="serviceQuestionType" id="dept_add_select">
			      <option>咨询服务</option>
			      <option>投诉服务</option>
			      <option>售前服务</option>
			      <option>售后服务</option>
				  </select>
			    </div>
			  </div>
			  <!--  -->
			   <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label" >答复要点</label>
			    <div class="col-sm-6">
			      <input type="text" name="answer"  class="form-control" id="empName_add_input" placeholder="answer is here .">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">备注信息</label>
			    <div class="col-sm-6">
			      <textarea class="form-control" rows="3" name="remarks"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>			
            </form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="ser_insert_btn">新增</button>
	      </div>
	    </div>
	  </div>
	</div>
<!-- 修改的模态框 --> 
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">修改</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal"> 
	      	  <!-- 姓名框 -->
			  <div class="form-group">
			    <label for="inputEmail3" class="col-sm-2 control-label">问题名称</label>
			    <div class="col-sm-6">
			      <input type="text" name="serviceQuestionTitle"  class="form-control" id="serName_add_input" placeholder="Service name is here .">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">问题类型</label>
			    <div class="col-sm-5">
			      <select class="form-control" name="serviceQuestionType" id="serType_add_select">
			      <option>咨询服务</option>
			      <option>投诉服务</option>
			      <option>售前服务</option>
			      <option>售后服务</option>
				  </select>
			    </div>
			  </div>
			  <!--  -->
			   <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label" >答复要点</label>
			    <div class="col-sm-6">
			      <input type="text" name="answer"  class="form-control" id="serCustom_add_input" placeholder="Service custom is here .">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">备注信息</label>
			    <div class="col-sm-6">
			      <textarea class="form-control" rows="3" id="remarks_add_input" name="remarks"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="ser_update_btn">更新</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- 删除不要模态框 -->
	<!-- 查看的模态框,查看不该在input中-->
<div class="modal fade" id="getModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">查看</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	<!--  -->    
	      	  <!-- 姓名框 -->
			  <div class="form-group">
			    <label for="inputEmail3" class="col-sm-2 control-label">问题名称</label>
			    <div class="col-sm-6">
			       <p name="serviceQuestionTitle"  id="serName_get_input" class="form-control-static"></p>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">问题类型</label>
			    <div class="col-sm-5">
			      <p name="serviceQuestionType"   id="serType_get_input" class="form-control-static"></p>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			   <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label" >答复要点</label>
			    <div class="col-sm-6">
			    <p name="answer"  id="answer_get_input" class="form-control-static"></p>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label" >备注信息</label>
			    <div class="col-sm-6">
			      <p id="remarks_get_input"  name="remarks" class="form-control-static"></p>
			      <span class="help-block"></span>
			    </div>
			  </div>			
            </form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- 这是selectif的查询结果模态框 -->
	<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	    <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	      </div>
	    <table id="showTable" class="table table-bordered" >
			<tr class="info"><td></td><td></td><td>问题名称</td><td>问题类型</td><td>创建人</td><td>最后操作时间</td></tr>
			<tr class="active" v-for="item in home2"><td></td><td><input type="radio" name="radio" /></td><td>{{item.serviceQuestionTitle}}</td><td>{{item.serviceQuestionType}}</td><td>{{item.creator}}</td><td>{{item.lastOperateTime}}</td></tr>
			<tr >
			      <td id="clear2" colspan="6"></td>
			      </tr>
			      
			</table>
			 </div>
	    </div>
	  </div>
<!--  -->
</div>
</body>
<script type="text/javascript" >
/* validate参见地址https://www.cnblogs.com/klguang/p/4864145.html */
$(document).ready(function(){
	console.log("opo");
	tableCreate.search(1); 
	
	/*添加提交按钮的 ajax,还剩 */
	$("#ser_insert_btn").click(function(){
		console.log()
		$.ajax({
			url:'../heyunServiceFAQ/insert',
			type:'post',
			dataType:'json',
			data:$("#myModal form").serialize()+'&creator='+"${sessionScope.user.empRealName}",
			success:function(result,xhr){
				console.log(result+"======");
				
				if(result!=0){
					
						$.growl({
								title: "消息提示",
						      message: "添加成功!"
						});
					
					
					$("#myModal").modal("hide");
					tableCreate.search(1); 
				}
				else{
					$.growl.error({
						title: "消息提示",
				      message: "添加失败!"
				});
			}
				}
		})  
	})
	//尾
	//修改按钮的ajax,隐含一个id
})
var tableCreate=new Vue({
	el : '#forTableCreate',
	data:{
		home:'',
		home2:''
	},
	methods:{
		search:function(currentPage){
			var _self = this;
				$.ajax({
					url:'../heyunServiceFAQ/select',
					type : 'post',
					dataType : 'json',
					data:{'currentPage':currentPage,'state':'新创建'},
					success:function(data){
						_self.home=data.heyunServiceFAQList;
						//console.log(_self.home[0].serviceName+"%%%%%");
						laypage({
						     
							  cont: $("#clear"),  //定义分页显示的容器
							  pages:data.totalPage,  //从后台查询得到总页数
							  curr:currentPage,     
							  skin: 'molv', 
							  skip:true, 
							  last:'末页',
							  groups:3,  
							  jump: function(obj, first){ 
							  console.log("==========================");
									
							    if(!first){   
							    	tableCreate.search(obj.curr);
							    }
							  }
							});
					}
				})	

		}
	,
	search2:function(currentPage){
		var _self = this;
			$.ajax({
				url:'../heyunServiceFAQ/select',
				type : 'post',
				dataType : 'json',
				data:$("#select_all_form").serialize()+'&currentPage='+currentPage,
				success:function(data){
					_self.home2=data.heyunServiceFAQList;
					$("#showModal").modal({
						backdrop:"static"
					})
					laypage({
					     
						  cont: $("#clear2"),  //定义分页显示的容器
						  pages:data.totalPage,  //从后台查询得到总页数
						  curr:currentPage,     
						  skin: 'molv', 
						  skip:true, 
						  last:'末页',
						  groups:3,  
						  jump: function(obj, first){ 
						  console.log("==========================haha");
								
						    if(!first){   
						    	tableCreate.search2(obj.curr);
						    }
						  }
						});
				}
			})	

	}
	}
})
/* 这一步是点击修改按钮获取了当条的id值 */
$(document).on("click",".edit_btn",function(){
	console.log("------------"+$(this).attr("update_id"));//本步Ok
		//2、查出员工信息
	 getHeyunServiceFAQ($(this).attr("update_id"));
		//3、把编辑按钮得到的员工ID传递给模态框的更新按钮
		 $("#ser_update_btn").attr("serviceQuestionId",$(this).attr("update_id"));
		$("#updateModal").modal({
			backdrop:"static"
		})  
	})
	function getHeyunServiceFAQ(serviceQuestionId){
	console.log("sddsdd");
		$.ajax({
			url:'../heyunServiceFAQ/selectExtra',
			type:"post",
			data:{'serviceQuestionId':serviceQuestionId},
			success:function(result){
				console.log(result);
				$("#serName_add_input").val(result.serviceQuestionTitle);
				$("#serType_add_input").val(result.serviceQuestionType);
				$("#serCustom_add_input").val(result.answer);
				
				$("#remarks_add_input").val(result.remarks);
			}
		});
	}
/* 点击删除按钮根据id删除单条 */
$(document).on("click",".del_btn",function(){
console.log("------------11111？？？"+$(this).attr("delete_id"));//本步Ok
	//2、查出员工信息

 if(confirm("确认删除？")){
	 deleteHeyunServiceFAQ($(this).attr("delete_id"));
	 
 }	
})
function deleteHeyunServiceFAQ(serviceQuestionId){
	$.ajax({
		url:'../heyunServiceFAQ/delete',
		type:"post",
		dataType:'json',
		data:{'serviceQuestionId':serviceQuestionId},
		success:function(result){
			console.log("shan"+result);
			if(result){
				$.growl({
						title: "消息提示",
				      message: "删除成功!"
				});
			}
			else{
				$.growl.error({
					title: "消息提示",
			      message: "删除失败!"
			});
			}
			tableCreate.search(1);
		}
	});
}
/*modal更新时的按钮操作  */
$("#ser_update_btn").click(function(){
	console.log($("#updateModal form").serialize()+"sssss");
	console.log($(this).attr("serviceQuestionId")+"sssa");
	$.ajax({
		url:'../heyunServiceFAQ/update?serviceQuestionId='+ $(this).attr("serviceQuestionId"),
		type:"post",
		dataType:'json',
		data:$("#updateModal form").serialize(),
		success:function(result){
			console.log("shenglilewo"+result);
			$("#updateModal").modal("hide");
			if(result==1){
				$.growl({
						title: "消息提示",
				      message: "更新成功!"
				});
			}
			else{
				$.growl.error({
					title: "消息提示",
			      message: "更新失败!"
			});
			}
			tableCreate.search(1); 
		}
		
	})
})
/* 查看单条记录，其实是修改的半截 */
	$(document).on("click",".get_btn",function(){
		console.log($(this).attr("get_id")+"ppppp");
		 getHeyunServiceFAQ2($(this).attr("get_id"));
	})
	function getHeyunServiceFAQ2(serviceQuestionId){
		console.log("sddsdd");
			$.ajax({
				url:'../heyunServiceFAQ/selectExtra',
				type:"post",
				data:{'serviceQuestionId':serviceQuestionId},
				success:function(result){
					console.log(result);
					$("#serName_get_input").html(result.serviceQuestionTitle);
					$("#serType_get_input").html(result.serviceQuestionType);

					$("#answer_get_input").html(result.answer);
					$("#remarks_get_input").html(result.remarks);
				}
			});
		}
/* 以下为全局查询 */	
$("#select_if_btn").click(function(){
	console.log($("#select_all_form").serialize()+"sssssss");
	tableCreate.search2(1);
	/* $.ajax({
		url:'../heyunServiceFAQ/select',//到这了，明日继续
		type:"post",
		data:$("#select_all_form").serialize()+'&currentPage=1',
		success:function(result){
			console.log(result+"黑猫警长sa");
			//tableCreate.search2(1);
			$("#showModal").modal({
				backdrop:"static"
			})
		}
	}); */
})
</script>
</html>